<template>
  <div class="passenger-flow-condition" ref="container"></div>
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import {range, sampleSize} from "lodash";
import useEcharts from "../../utils/useCharts";

const {container, echarts, setOption, clear} = useEcharts();

// // 计算数据的最大值和最小值
// let maxValue = Math.max(...data);
// let minValue = Math.min(...data);
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  activeIndex: {
    type: Number,
    default: 1
  },
  powerTypes: {
    type: Array,
    default: () => []
  },
  seriesType: {
    type: String,
    default: 'line'
  }
});

const echartData = ref({});

const processEchartData = () => {
  // 提取所有时间点
  const timeNames = new Set(props.tableData.map(item => item.timeName));

  // 初始化结果数据结构
  const powerTypes = props.powerTypes;

  // 构建 ECharts 数据
  const seriesData = powerTypes.map(powerType => {
    return {
      name: powerType.label,
      type: props.seriesType,
      data: Array.from(timeNames).sort().map(timeName => {
        const value = props.tableData.find(item => item.timeName === timeName)[powerType.key] || 0;
        return value;
      })
    };
  });

  echartData.value = {
    timeNames: Array.from(timeNames).sort(),
    seriesData: seriesData
  };
  const options = generateOptions();
  setOption(options);
  // 调试信息
  console.log('Processed ECharts Data:', echartData.value);
};
// 监听 props.tableData 的变化
watch(
    () => props.tableData,
    (newVal) => {
      if (newVal.length > 0) {
        processEchartData();
      } else {
        clear();
      }
    },
    {immediate: true, deep: true} // 立即执行一次
);
watch(
    () => props.activeIndex,
    (newVal) => {
      console.log("=>(chart.vue:77) newVal", newVal);
      if (newVal === 1) {
        processEchartData();
      } else {
        clear();
      }
    }
)
const generateOptions = () => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "#2f2f48",
      borderColor: "#2f2f48",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "5%",
      right: "2%",
      bottom: "12%",
      top: "5%",
    },
    legend: {
      icon: 'Rect',
      orient: 'horizontal',
      itemWidth: 20,
      itemHeight: 2,
      textStyle: {
        fontSize: 12, //字体大小
        color: "#000000", //字体颜色
      },
      right: '10%', //距离右侧
      height: 260,  //设置高度，超出翻页
      data: echartData.value.seriesData.map(series => series.name)
    },
    xAxis: {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#9292c1",
        fontSize: 15,
        margin: 20,
      },
      data: echartData.value.timeNames,
    },
    yAxis: {
      type: "value",
      min: 200,
      axisLabel: {
        color: "#9292c1",
      },
      splitLine: {
        lineStyle: {
          color: "#9292c130",
          type: "dashed",
        },
      },
    },
    series: echartData.value.seriesData
    // series: [
    //   {
    //     name: "重点乘客",
    //     type: "line",
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //         {offset: 0, color: "#32fedb"},
    //         {offset: 1, color: "#319cfc"},
    //       ]),
    //     },
    //     barWidth: 20,
    //     data: sources[0],
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //   },
    //   {
    //     name: "常乘客",
    //     type: "line",
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //         {offset: 0, color: "#f7cd5e"},
    //         {offset: 0.8, color: "#ee8149"},
    //       ]),
    //     },
    //     barWidth: 20,
    //     data: sources[1],
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //   },
    //   {
    //     name: "管控人员",
    //     type: "line",
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //         {offset: 0, color: "#de38fb"},
    //         {offset: 1, color: "#6732f3"},
    //       ]),
    //     },
    //     barWidth: 20,
    //     data: sources[2],
    //     animationDuration: 3000,
    //     animationEasing: "cubicInOut",
    //   },
    // ],
  };
};

// onMounted(() => {
//   const sources = [
//     sampleSize(range(1000, 200), 7),
//     sampleSize(range(1000, 200), 7),
//     sampleSize(range(1000, 200), 7),
//   ];
//
//   const options = generateOptions(sources);
//   setOption(options);
// });
</script>
<style lang="scss" scoped>
.passenger-flow-condition {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 300px;
}
</style>
